<template>
  <div class="register">
    <div class="header">
      <van-nav-bar
        title="注册"
        right-text="登录"
        left-arrow
        @click-left="back"
        @click-right="goLogin"
      >
      </van-nav-bar>
    </div>
    <div class="bg">
      <div class="logo">
        <img class="auto-img" src="../assets/home-active.png" alt="" />
      </div>
      <p class="mao-yan">猫眼电影</p>
    </div>
    <div class="register-form">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
          class="account"
          autocomplete="off"
        />
        <van-field
          v-model="password"
          name="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          :type="!isOpenPwd ? 'password' : 'text'"
          class="pwd"
          @click="togglePwd"
          :right-icon="!isOpenPwd ? 'closed-eye' : 'eye-o'"
          autocomplete="off"
        />
        <!-- <van-field
          v-model="yzm"
          name="验证码"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
          class="yzm"
        /> -->
        <div class="yzm-box">
          <input
            type="text"
            placeholder="验证码"
            autocomplete="off"
            class="yzm"
            id="yzm"
          />
          <!-- <canvas id="canvas" width="70" height="36"></canvas> -->
          <div class="box"></div>
          <p class="yzmBtn" @click="changYzm">看不清，换一张</p>
        </div>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="register"
            >注册</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import cryptoJs from 'crypto-js';
export default {
  name: "Register",
  data() {
    return {
      username: "",
      password: "",
      yzm: "",
      // 查看注册密码
      isOpenPwd: false,
      yzmData1: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
      ],
      yzmData2: ["I", "i", 1, "l", 0, "O", "o"],
      yzmbox: "",
      cookie: "",
    };
  },
  created() {
    this.filterData();
    this.randomColor();
  },
  mounted() {
    this.drawYzm();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    goLogin() {
      this.$router.push({ name: "Login" });
    },
    onSubmit(values) {
      
    },
    register() {
      // 

      // if (this.username === "" || this.password === "" || this.yzm === "") {
      //   
      //   return;
      // }
      /**
       * 密码验证
       * 密码必须含有字母和数字，可由字母数字下划线组成（6~12位）
       * */
      let pwdReg = /^(?=.*[a-zA-Z]+)(?=.*\d+)\w{6,12}/;
      if (!pwdReg.test(this.password)) {
        alert("密码必须含有字母和数字，可由字母数字下划线组成（6~12位）");
        return;
      }

      // 验证码验证
      let yzm = document.querySelector(".yzm").value.trim();
      

      let box = document.querySelector(".box");
      let yzmContent = box.textContent;
      
      if (yzm.toUpperCase() !== yzmContent.toUpperCase()) {
        alert("验证码输入错误");
        return;
      }

      alert("注册成功！请前往登录");

      // cookie有效时间1小时
      let time = new Date().getTime() + 60 * 60 * 1000;
      let date = new Date(time).toUTCString();
      document.cookie = "account=" + this.username + ";expires=" + date;
      // document.cookie = "password=" + this.password + ";expires=" + date;

      // 加密密码
      let cipherText = cryptoJs.AES.encrypt(
        this.password,
        'password'
      ).toString();
      
      document.cookie = "password=" + cipherText + ";expires=" + date;

       this.$router.push({name:'Login'});

    },
    // 切换密码可见状态
    togglePwd() {
      this.isOpenPwd = !this.isOpenPwd;
    },
    // 过滤验证码数据
    filterData() {
      this.yzmData1.forEach((e) => {
        // 
        // 
        // 获取data2中元素在data1的下标位置
        let index = this.yzmData1.indexOf(e);
        if (index > -1) {
          // 删除data1中与data2相同的元素
          this.yzmData1.splice(index, 1);
          // 
        }
      });
    },
    // 生成4位随机验证码
    drawYzm() {
      // let canvas = document.querySelector("#canvas");
      // let context = canvas.getContext("2d");

      // for (let i = 0; i < 4; i++) {
      //   let x = 14 + 10 * i;
      //   let y = 20 + 10 * Math.random();
      //   // 
      //   let index = Math.floor(Math.random() * this.yzmData1.length);
      //   // 
      //   let texts = this.yzmData1[index];
      //   // 
      //   context.font = "20px 微软雅黑";
      //   context.fillStyle = this.randomColor();
      //   context.fillText(texts, x, y);
      // }

      let validcode = [];
      for (let i = 0; i < 4; i++) {
        // 获取随机一个验证码
        let randomIndex = Math.floor(Math.random() * this.yzmData1.length);
        let code = this.yzmData1[randomIndex];
        if (this.yzmData2.indexOf(code) > -1) {
          // 
          i--;
          continue;
        }

        validcode.push(code);
      }
      let box = document.querySelector(".box");
      box.textContent = validcode.join("");
      box.style.color = this.randomColor();
    },
    // 随机颜色验证码
    randomColor() {
      let r = Math.floor(Math.random() * 256);
      let g = Math.floor(Math.random() * 256);
      let b = Math.floor(Math.random() * 256);
      return `rgb(${r},${g},${b})`;
    },
    // 点击改变验证码
    changYzm() {
      // let canvas = document.querySelector("#canvas");
      // let context = canvas.getContext("2d");
      // context.clearRect(0, 0, 70, 36);

      this.drawYzm();
    },
  },
};
</script>

<style lang="less" scoped>
// .register {
  // border: 1px solid #000;
  // background-color: #f5f5f5;
  // height: 620px;
// }
.header {
  background-color: #fb5268;
  width: 100%;
  height: 46px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  /deep/.van-nav-bar__content {
    // border: 1px solid red;
    background-color: #fb5268;
  }
  /deep/ .van-hairline--bottom::after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: none;
  }
  /deep/ .van-nav-bar__arrow {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 19px;
  }
  /deep/ .van-nav-bar__text {
    color: #fff;
    font-size: 16px;
  }
}
.bg {
  // border: 1px solid #000;
  background-color: #fb5268;
  height: 300px;
  margin-top: 46px;
  position: relative;
  .logo {
    width: 90px;
    height: 90px;
    background-color: #fff;
    border-radius: 14px;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -45px;
    display: flex;
    align-items: center;
    justify-content: center;
    .auto-img {
      width: 66px;
    }
  }
  .mao-yan {
    position: absolute;
    top: 136px;
    left: 50%;
    margin-left: -29px;
    color: #fff;
    font-size: 15px;
  }
}
.register-form {
  background-color: #fff;
  // border: 1px solid #000;
  width: 86%;
  height: 280px;
  margin-top: -100px;
  position: absolute;
  left: 50%;
  margin-left: -161px;
  border-radius: 10px;
  box-shadow: 0 0 2px 2px #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .van-form {
    // border: 1px solid #000;
    width: 80%;
    border-radius: 10px;
    margin-top: 10px;
    .van-cell {
      // border: 1px solid #000;
      border-bottom: 1px solid #aaa;
      margin-bottom: 26px;
      padding-bottom: 0;
      /deep/.van-field__control {
        font-size: 16px;
      }
    }
    .van-button {
      background-color: #fb5268;
      position: absolute;
      bottom: -20px;
      width: 70%;
      border: none;
      font-size: 18px;
      letter-spacing: 4px;
    }
    /deep/ .van-field__body {
      // border: 1px solid #000;
      margin-left: 38px;
      padding-top: 2px;
    }
    /deep/ .van-field__error-message {
      margin-left: 38px;
    }
    /deep/ .van-icon {
      font-size: 22px;
    }
  }
  .account {
    background-image: url("../assets/account.png");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 20px 8px;
  }
  .pwd,
  .repwd {
    background-image: url("../assets/pwd.png");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 20px 10px;
  }
  .eye {
    // border: 1px solid #000;
    position: absolute;
    right: 45px;
    bottom: 140px;
  }
}
.yzm-box {
  // border: 1px solid #000;
  // border-bottom: 1px solid #ccc;
  width: 260px;
  height: 36px;
  display: flex;
  align-items: center;
  .yzm {
    border: 1px solid #ccc;
    width: 90px;
    height: 36px;
    box-sizing: border-box;
    margin-right: 6px;
    margin-bottom: 4px;
    padding-left: 4px;
    font-size: 15px;
  }
  #canvas {
    // border: 1px solid #000;
    background-color: #eee;
    width: 70px;
    height: 36px;
    margin-right: 6px;
    margin-bottom: 4px;
  }
  .yzmBtn {
    color: rgb(46, 46, 253);
  }
}
.box {
  width: 80px;
  height: 24px;
  // border: 1px solid #000;
  background-color: #eee;
  width: 70px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 4px;
  margin-right: 6px;
  margin-bottom: 4px;
}
</style>